<template>
    <div class="hot">
      <p class="p"><i class="iconfont">&#xe68a;</i>视频推荐</p>
      <ul>

        <li v-for="(item,index) in List" :key="item.index">
          
          <img :src="item.resource.photo" alt="">
          <div class="single">
            <router-link :to='"/userdetails/" + item.user.id'>
            <p>
              <img :src="item.user.photo" alt="">
              <a href="###">{{item.user.name}}</a>
            </p>
            </router-link>
            <div>名字：{{item.resource.name}}</div>
            <div>时间：{{item.resource.createtime.slice(0,10)}}</div>
            <div>路径：{{item.resource.path}}</div>
            <div>简介：{{item.resource.introduction}}</div>
            
          </div>
          <span><a href="###" class="iconfont" @click="collect(index)"  v-if="!Favorite[index]" title="收藏">&#xe662;</a></span>
          <span><a href="###" class="iconfont" @click="collect(index)"  v-if="Favorite[index]" title="取消收藏" style="color: red">&#xe8c3;</a></span>
        </li>

      </ul>

      <p class="book p"><i class="iconfont">&#xe68a;</i>书籍推荐</p>
      <ul>

        <li v-for="(item,index) in list" :key="item.index">
          <img :src="item.resource.photo" alt="">
          <div class="single">
            <router-link to="/userdetails">
            <p>
              <img :src="item.user.photo" alt="">
              <a href="###">{{item.user.name}}</a>
            </p>
            </router-link>
            <div>书名：{{item.resource.name}}</div>
            <div>时间：{{item.resource.createtime.slice(0,10)}}</div>
            <div>路径：{{item.resource.path}}</div>
            <div>简介：{{item.resource.introduction}}</div>
            
          </div>
          <span><a href="###" class="iconfont" @click="add(index)"  v-if="!favorite[index]" title="收藏">&#xe690;</a></span>
          <span><a href="###" class="iconfont" @click="add(index)"  v-if="favorite[index]" title="取消收藏" style="color: #FFD700">&#xe6ca;</a></span>
        </li>

      </ul>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
export default {
  name: 'hot',
  data () {
    return {
      like: true,
      List: '',
      list: '',
      Favorite: [],
      favorite: [],
      user: [],
    }
  },

  methods: {
    collect(index) {
      if (this.user != "") {
        if (this.Favorite[index] == 0) {
          this.Favorite[index] = !this.Favorite[index]
          let newItem = this.Favorite[index]
          Vue.set(this.Favorite, index, newItem)
        
          let postData = qs.stringify({
            rid: this.List[index].resource.id,
            favorite: 0,
          })

          axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })
        }else {
          this.Favorite[index] = !this.Favorite[index]
          let newItem = this.Favorite[index]
          Vue.set(this.Favorite, index, newItem)
          
          let postData = qs.stringify({
            rid: this.List[index].resource.id,
            favorite: 1,
          })

          axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })

        }
      }
      else {
        this.$message({
          type: 'error',
          message: "请先登录！"
        })
      }
          
    },

    add(index) {
      if (this.user != "") {
        if (this.favorite[index] == 0) {
          this.favorite[index] = !this.favorite[index]
          let newItem = this.favorite[index]
          Vue.set(this.favorite, index, newItem)
        
          let postData = qs.stringify({
            rid: this.list[index].resource.id,
            favorite: 0,
          })

          axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })
        }else {
          this.favorite[index] = !this.favorite[index]
          let newItem = this.favorite[index]
          Vue.set(this.favorite, index, newItem)
          
          let postData = qs.stringify({
            rid: this.list[index].resource.id,
            favorite: 1,
          })

          axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })

        }
      }
      else {
        this.$message({
          type: 'error',
          message: "请先登录！"
        })
      }
          
    },
  },

  created () {
    axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

      if (response.status === 200) {
        if (response.data !== "") {
          this.user = response.data
        }
      } 

    })

    let postData = qs.stringify({
      option: 1,
      page: 1,
    })
    // console.log(postData)
    
    axios.post('/api/recommend', postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {
  
      if (response.status === 200) {
        this.List = response.data
        // console.log(this.List)

        for (var i = 0; i < this.List.length; i++) {
           
          let id = this.List[i].resource.id
          axios.post(`/api/resource/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              
              this.Favorite.push(response.data.favorite)
            } 
          })
          
        }
        
      }

    })

    let postDatab = qs.stringify({
      option: 2,
      page: 1,
    })
    // console.log(postData)
    
    axios.post('/api/recommend', postDatab, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {
  
      if (response.status === 200) {
        this.list = response.data
        // console.log(this.list)

        for (var i = 0; i < this.list.length; i++) {
           
          let id = this.list[i].resource.id
          axios.post(`/api/resource/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              
              this.favorite.push(response.data.favorite)
            } 
          })
          
        }
        
      }

    })
  },

}
</script>

<style lang="stylus" scoped>
.hot
  width 100%
  min-height 30rem
  margin-top .5rem
  margin-bottom 2rem
  border 1px #ccc solid
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color #fff
  .p
    line-height 2rem
    font-size .9rem
    text-indent .3rem
    background-color #eee
    border 1px #ccc solid
    i 
      color #cf2730
  ul
    width 100%
    // background-color skyblue 
    li
      width 100%
      height auto
      padding .5rem
      box-sizing border-box
      border-bottom 1px #ccc solid
      position relative
      // background-color #fff
      img 
        width 20%
        margin-left 0%
      .single
        width 65%
        height auto
        margin-top -3rem
        margin-left 3.5rem
        // background-color #fff
        p
          line-height 1rem
          font-size .8rem
          text-indent .3rem
          margin-top 1.8rem
          // background-color #fff
          img 
            height 1.5rem
            width 13%
            border-radius 50%
        div
          width 120%
          margin-left .5rem
          // 强制div文字超出部分自动换行
          word-break break-all
          // background-color red
      span 
        position absolute
        left 85%
        top .5rem
        // background-color red
        a
          font-size 1.2rem
</style>